{% extends 'base.html' %}
{% load static %}
{% block title %}
    可视化数据概览
{% endblock %}

{% block css %}

{% endblock %}

{% block nav_list %}
    <li><a href="/list/">列表筛选视图</a></li>
    <li class="active"><a href="/overlook/">可视化数据概览</a></li>
    <li><a href="/chart/">可视化大数据分析</a></li>
    <li><a href="/predict/">漏洞解决时间预测</a></li>
{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-8" id="line" style="height: 600px"></div>
            <div class="col-md-4" id="wordCloud" style="height: 600px"></div>
            <div class="col-md-12" id="scatter" style="height: 2000px"></div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'js/echarts-wordcloud.min.js' %}"></script>
    <script>
        let line = echarts.init(document.querySelector("#line"));
        let option_line = {
            color: ["#3fb1e3", "#a0a7e6", "#c4ebad", "#96dee8", "#626c91", "#6be6c1"],
            title: {
                text: '各年份漏洞各等级发布数量'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['低危', '中危', '高危', '超危']
            },
            toolbox: {
                feature: {
                    saveAsImage: {},
                    magicType: { type: ['bar'] },
                    restore: {},
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: {{ line_x }}
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '低危',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ line_level1 }}
                },
                {
                    name: '中危',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ line_level2 }}
                },
                {
                    name: '高危',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ line_level3 }}
                },
                {
                    name: '超危',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ line_level4 }}
                }
            ]
        };
        line.setOption(option_line);
        window.addEventListener("resize", function () {
            line.resize();
        });
    </script>
    <script>
        let word_cloud = echarts.init(document.querySelector('#wordCloud'));
        //2.指定配置项和数据
        let option_word = {
            title: {
                text: '漏洞名称分词统计'
            },
            color: ["#3fb1e3"],
            tooltip: {
                show: true
            },
            gird: {
                top: '10%',
                bottom: '10%',
                left: '10%',
                right: '10%',
                containLabel: false,
            },
            series: [{
                type: "wordCloud",
                girdSize: 10,
                shape: 'circle',
                sizeRange: [16, 80],
                top: "10%",
                bottom: "2%",
                width: "100%",
                data: {{ word_cloud }},
            }]
        };
        word_cloud.setOption(option_word);
        window.addEventListener("resize", function () {
            word_cloud.resize();
        });
    </script>
    <script>
        let scatter = echarts.init(document.querySelector("#scatter"));
        let scatter_x = {{ scatter_x }};
        let scatter_y = {{ scatter_y }};
        let scatter_data =
        {{ scatter_data }}
        .map(function (item) {
            return [item[1], item[0], item[2]];
        });
        let option = {
            color: ["#3fb1e3"],
            title: {
                text: '各年份发布的漏洞类型数量'
            },
            legend: {
                data: ['数量'],
                left: 'right'
            },
            tooltip: {
                position: 'top',
                formatter: function (params) {
                    return (
                        scatter_x[params.value[0]] + '年“' + scatter_y[params.value[1]] + '”漏洞类型有' + params.value[2] + '次'
                    );
                }
            },
            grid: {
                left: "0%",
                top: "2%",
                bottom: "0%",
                right: "2%",
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: {{ scatter_x }},
                boundaryGap: false,
                splitLine: {
                    show: true
                },
                axisLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'category',
                data: {{ scatter_y }},
                axisLine: {
                    show: false
                }
            },
            series: [
                {
                    name: '数量',
                    type: 'scatter',
                    // 气泡大小
                    symbolSize: function (val) {
                        return val[2] / 50;
                    },
                    data: scatter_data,
                    animationDelay: function (idx) {
                        return idx * 5;
                    }
                }
            ]
        };
        scatter.setOption(option);
        window.addEventListener("resize", function () {
            scatter.resize();
        });
    </script>
{% endblock %}